<%@ page import="org.jeecgframework.web.util.StaticValue" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@include file="/context/mytags.jsp" %>
<!DOCTYPE html >
<html>
<head>
    <title>巡检满意度报告</title>
    <t:base type="jquery,easyui,tools,echarts"></t:base>
    <style>
        .chart-container {
            width: 100%;
        }

        .search-bar {
            height: 40px;
            width: 98%;
            margin: 0 auto;
        }

        .search-bar .condition {
            width: 90%;
            float: left;
            text-align: left;
        }

        .search-bar div:last-child {
            width: 8%;
            float: right;
            text-align: right;
        }

        .search-bar span {
            padding-right: 10px;
        }

        .search-bar span select {
            height: 24px !important;
        }

        .search-bar .search-btn {
            float: right;
            width: 10%;
            text-align: center;
            line-height: 40px;
        }

        #chart {
            width: 90%;
            height: 700px;
            margin: 15px auto;
        }
        .pp-div{
            margin-left: 5px;
            width: 50%;
            float: left;
            position: absolute;
        }
        .pp-div p{
            color:#7d7b7b;
            font-size: 17px;
            word-spacing:1px;
            letter-spacing:1px;
        }
        .pp-div span{
            color:#7d7b7b;
            font-size: 14px;
            word-spacing:1px;
            letter-spacing:1px;
        }
    </style>
</head>
<body>
<div class="chart-container">
    <div class="search-bar">
        <div class="condition">
            <form id="searchForm">
                <span>
                    <label>年度选择:</label>
                    <select name="year" id="year" style="width:60px;">
                            <c:forEach begin="2016" end="2019" var="y">
                                <option value="${y-2000}" <c:if test="${y eq 2019 }" >selected='selected'</c:if>>${y}</option>
                            </c:forEach>

                        </select>
                </span>
                <c:if test="${empty chain}">
                <span>
                    <label>月份:</label>
                    <select name="month" id="month" style="width:80px;">
                            <option value="">请选择</option>
                            <c:forEach begin="1" end="12" var="m">
                                <option value="${m}">${m}月</option>
                            </c:forEach>

                        </select>
                </span>
                <span>
                    <label>院线:</label>
                    <input id="intheaterId_1" name="intheaterId_1" type="hidden">
                    <input id="intheatername_1" name="intheatername_1" readonly="readonly" class="inputxt" style="width: 120px;"/>
                    <t:choose hiddenName="intheaterId_1" hiddenid="id" inputTextname="intheatername_1"
                              url="zyIntheaterController.do?zyintheatersCheckboxList"
                              name="intheaterList" icon="icon-search" title="院线列表" textname="typename"
                              isclear="true" height="300px" width="400px"/>
                </span>
                <span>
                    <label>省市:</label>
                    <input type="text" id="province" name="province"/>
                    <script type="text/javascript">
                        territoryLink("", "province");
                    </script>
                </span>
                <span>
                    <label>机型:</label>
                     <input id="typeId" name="typeId" type="hidden"/>
                        <input id="typeName" type="text" readonly="readonly" style="width: 80px" class="inputxt"
                               datatype="*"
                               nullmsg="请选择机型 "/>
                        <t:choose hiddenName="typeId" hiddenid="id" inputTextname="typeName" textname="text"
                                  title="机型" url="zyEquipmentTypeController.do?goChooseEquipmentTypeForEquipment"
                                  name="zyEquipmentTypeList" width="600px" height="400px"
                                  icon="icon-search" isclear="true"/>
                </span>
                </c:if>
            </form>
        </div>
        <div>
            <span>
                <a href="javascript:void(0);" class="easyui-linkbutton search"
                   data-options="iconCls:'icon-search'">查询</a>
            </span>
        </div>
    </div>
    <div class="pp-div">
        <p >巡检满意度评分<br>
            <span>巡检满意度评分是巡检后，中影巴可400工作人员对现场联系人的满意度回访平均分。<br/>体现了贵院线对于中影巴可巡检服务的评价。
        巡检前后亮度对比。</span>
        </p>
    </div>
    <div id="chart" style="">

    </div>
</div>

<script type="text/javascript">
    $(function(){
        // $("select[name='chain']").children(":first").text("全部院线");
    })
    function search() {
        myChart.showLoading({
            text: '加载中'
        });
        $.getJSON("chainReportController.do?drawRadaEvaluate", $("#searchForm").serialize(), function (data) {
            myChart.hideLoading();
            if (!$.isEmptyObject(data)) {
                try {
                    option.series[0].data = [data.results];
                } catch (e) {

                }
            }
            myChart.setOption(option);

        })
    }
    $(function () {
        $(".search").click(function () {
            search();
        })
        $(".search").trigger("click")
    })
    var myChart = echarts.init(document.getElementById('chart'));

    var indi = [
        {name: '服务', min:4,max: 5},
        {name: '沟通', min:4,max: 5},
        {name: '巡检效果',min:4, max: 5},
        {name: '培训', min:4,max: 5},
        {name: '技能', min:4,max: 5}
    ];

    option = {
        tooltip: {
            trigger: 'item'
        },
        radar: {
            indicator: indi,
            shape: 'circle',
            splitNumber: 5,
            name: {
                textStyle: {
                    color: 'black',
                    fontSize:14
                }
            },
            axisLabel: {
                show: true,
                inside: true,
                formatter: function (value, index) {
                    if (index === 0) {
                        return '';
                    }
                    return value;
                }
            }
        },
        series: [
            {
                name:'巡检满意度',
                type: 'radar',
                tooltip: {
                    formatter : function(param){
                        var txt = param.seriesName+"<br/>";
                        for(var i = 0;i<indi.length;i++){
                            txt += indi[i].name+":"+Number(param.data[i]).toFixed(2)+"<br/>"
                        }
                        return txt;
                    }
                },
                itemStyle: {normal: {areaStyle: {type: 'default'}}},
                areaStyle: {
                    normal: {
                        opacity: 0.4
                    }
                }
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>
